<template>
  <div class="enterprise-form">
    <el-form ref="form" :model="form" label-width="120px"  label-position="left">
      <el-form-item label="企业名称" style="width: 500px;">
        <el-input v-model="form.enterpriseName"></el-input>
      </el-form-item>
      <el-form-item label="企业联系方式"  style="width: 250px;">
        <el-input v-model="form.tel"></el-input>
      </el-form-item>
      <el-form-item label="企业密码" style="width: 300px;">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item label="企业规模" style="width: 300px;">
        <el-input v-model="form.enterpriseScale"></el-input>
      </el-form-item>
      <el-form-item label="企业性质" style="width: 300px;">
        <el-input v-model="form.enterpriseNature"></el-input>
      </el-form-item>
      <el-form-item label="企业所在城市">
        <el-select v-model="form.enterpriseCity" placeholder="请选择企业所在城市">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业具体位置">
        <el-input v-model="form.enterpriseLocation" ></el-input>
      </el-form-item>
      <el-form-item label="企业概况">
        <el-input type="textarea" v-model="form.enterpriseProfile"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="onSubmit">立即修改</el-button>
        <el-button type="info" style="width: 135px" @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        enterpriseName: '',
        tel: "",
        password: "",
        enterpriseScale: "",
        enterpriseNature: "",
        enterpriseCity: "",
        enterpriseProfile: "",
        enterpriseLocation:"",
      },
      enterpriseId: 0,
      enterprise:[],
      originalForm: {}, // 保存初始表单数据或者上一次成功保存的数据
    }
  },
  created() {
    this.enterpriseId = this.$route.query.enterpriseId;
    this.fetchEnterpriseData(); // 初始加载时获取职位信息
  },
  methods: {
    async fetchEnterpriseData() {
      try {
        // 获取企业数据
        const enterpriseResponse = await this.$axios.get("/enterprise/getEnterpriseById?enterpriseId="+this.enterpriseId);
        this.enterprise = enterpriseResponse.data;
        // 将获取到的企业数据填充到表单模型中
        this.form.enterpriseName = this.enterprise.enterpriseName;
        this.form.tel = this.enterprise.tel;
        this.form.password = this.enterprise.password;
        this.form.enterpriseScale = this.enterprise.enterpriseScale;
        this.form.enterpriseNature = this.enterprise.enterpriseNature;
        this.form.enterpriseCity= this.enterprise.enterpriseCity;
        this.form.enterpriseProfile = this.enterprise.enterpriseProfile;
        this.form.enterpriseLocation = this.enterprise.enterpriseLocation
        // 保存初始表单数据
        this.originalForm = { ...this.form };

        if (this.enterprise.length > 0) {
          console.log(' enterprise获取成功:', this.enterprise);
        } else {
          console.log('enterprise获取失败或为空');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    async onSubmit() {
      // 提交表单逻辑，可以在这里处理表单的提交操作
      console.log('提交的表单数据:', this.form);

      // 调用保存方法
      await this.saveEnterpriseData();
    },
    async saveEnterpriseData() {
      try {
        // 构造要提交的数据
        const postData = {
          enterpriseId: this.enterpriseId,
          enterpriseName: this.form.enterpriseName,
          tel: this.form.tel,
          password: this.form.password,
          enterpriseScale: this.form.enterpriseScale,
          enterpriseNature: this.form.enterpriseNature,
          enterpriseCity: this.form.enterpriseCity,
          enterpriseProfile: this.form.enterpriseProfile,
          enterpriseLocation:this.form.enterpriseLocation
        };
        // 发送 POST 请求保存数据
        const response = await this.$axios.post("/enterprise/updateEnterpriseById", postData);
        console.log('保存成功:', response.data);
        // 如果后端成功返回了消息，显示成功提示
        if (response.data && response.data==="修改企业信息成功") {
          this.$message.success('修改企业信息成功');
        }

        // 更新本地数据
        await this.fetchEnterpriseData();

      } catch (error) {
        console.error('保存失败:', error);
        // 可以根据需要处理保存失败后的逻辑
      }
    },
    onCancel() {
      // 取消按钮点击事件，恢复表单数据为初始状态
      this.form = { ...this.originalForm };
    },
  },
}
</script>

<style scoped>
/*.enterprise-form {*/
/*  max-width: 1000px;*/
/*  margin: 0 auto;*/
/*  padding: 20px;*/
/*  border: 1px solid #ebebeb;*/
/*  border-radius: 5px;*/
/*}*/

.enterprise-form {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
  border-radius: 20px;
  background: #ececec;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 调整输入框的样式 */
.el-input {
  font-size: 18px; /* 调整字体大小 */
  font-weight: bolder;
  border-color: #000000; /* 调整边框颜色 */
  background-color: #f0f9eb; /* 调整背景色 */
}

</style>